<template>
	<view class="bg-light" style="min-height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">作品列表</block>
		</cu-custom>
		<block v-for="(item,index) in list" :key="index">
			<view v-if="!item.isedit" class="bg-white">
				<video style="height: 350rpx;width: 100%;" :src="item.video" controls></video>
				<form-item label="标题">
					<text class="font">{{item.title}}</text>
				</form-item>
				<view class="flex" style="height: 100rpx;">
					<view class="flex-1 font flex align-center justify-center" hover-class="bg-light" @click="openEdit(item)">修改</view>
					<view class="flex-1 font flex align-center justify-center" hover-class="bg-light" @click="deleteItem(item)">删除</view>
				</view>
			</view>
			<view v-else class="bg-white">
				<view style="height: 350rpx;" class="bg-light position-relative" hover-class="bg-hover-light">
					<video v-if="item.video" style="height: 350rpx;width: 100%;" :src="item.video" controls></video>
					<view v-if="!item.video" class="position-absolute left-0 right-0 top-0 bottom-0 flex flex-column align-center justify-center" style="background-color: rgba(255,255,255,0.2);" @click="upload(item)">
						<text class="iconfont iconjia" style="font-size: 50rpx;"></text>
						<text class="font text-muted">点击添加视频</text>
					</view>
				</view>
				<view v-if="item.video" class="flex align-center justify-center font border-bottom border-top" hover-class="bg-light" style="height: 100rpx;" @click="upload(item)">
					点击切换视频
				</view>
				<form-item label="标题">
					<input type="text" v-model="item.title" placeholder="请填写视频标题" placeholder-class="text-light-muted" class="w-100 pr-5"/>
				</form-item>
				<form-item label="描述">
					<textarea v-model="item.desc" placeholder="请填写视频描述" style="width: 550rpx;" class="py-3"/>
				</form-item>
				<view class="flex" style="height: 100rpx;">
					<view class="flex-1 font flex align-center justify-center bg-primary text-white" hover-class="bg-main-hover" @click="submit(item)">完成</view>
					<view class="flex-1 font flex align-center justify-center" hover-class="bg-light" @click="deleteItem(index)">删除</view>
				</view>
			</view>
			<view class="f-divider"></view>
		</block>
		
		<view v-if="showButton" class="flex align-center justify-center bg-primary text-white font" style="height: 100rpx;" hover-class="bg-main-hover" @click="add">
			+ 添加新章节
		</view>
	</view>
</template>

<script>
	import formItem from '@/components/free-ui/form-item.vue';
	// #ifndef H5
	// import VodUploader from '@/common/vod-wx-sdk-v2.js';
	// #endif
		
	export default {
		components: {
			formItem
		},
		data() {
			return {
				id:0,
				list:[],
			}
		},
		computed: {
			showButton() {
				let arr = this.list.filter(item=>{
					return item.isedit
				})
				return arr.length === 0
			}
		},
		onLoad(e) {
			if(!e.id){
				uni.navigateBack({
					delta: 1
				});
				return uni.showToast({
					title: '非法参数',
					icon: 'none'
				});
			}
			this.id = e.id
			this.getData()
		},
		methods: {
			getData(){
				this.$C.get('/video_detail/'+this.id).then(res=>{
					this.list = res.map(item=>{
						item.isedit = false
						item.video = item.url
						return item
					})
				})
			},
			// 完成
			submit(item){
				if(!item.video){
					return uni.showToast({
						title: '视频不能为空',
						icon: 'none'
					});
				}
				if(!item.title){
					return uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					});
				}				
				
				let url = item.id ? '/video_detail/'+item.id : '/video_detail'
				let msg = item.id ? '修改' : '创建'
				this.$C.post(url,{
					title:item.title,
					url:item.video,
					video_id:this.id,
					desc:item.desc
				},{ token:true }).then(res=>{
					item.isedit = false
					uni.showToast({
						title: msg + '成功',
						icon: 'none'
					});
					this.getData()
				})
			},
			// 删除
			deleteItem(item){
				console.log(item);
				uni.showModal({
					content: '是否要删除该视频？',
					success: (res)=>{
						if (res.confirm) {
							this.$C.post('/video_detail/destroy',{
								id:item.id
							},{
								token:true
							}).then(res=>{
								this.getData()
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								});
							})
						}
					}
				});
			},
			// 添加章节
			add(){
				this.list.push({
					video:"",
					title:"",
					desc:"",
					isedit:true
				})
			},
			//上传视频
			upload(item){
				uni.chooseVideo({
					maxDuration:10,
					success: (e) => {
						this.$C.upload('/upload',{
							filePath:e.tempFilePath
						},(progress)=>{
							console.log('上传进度',progress);
						}).then(res=>{
							item.video = res
							console.log('88888888999999',res);
							// this.video = {
							// 	src:url,
							// 	poster:url + '?x-oss-process=video/snapshot,t_10,m_fast,w_300,f_png'
							// }
						})
					}
				})
			},
			
			// 上传视频
			// upload(item){
			// 	uni.chooseVideo({
			// 		count: 1,
			// 		sourceType: ['camera', 'album'],
			// 		success: (res)=> {

			// 			// #ifdef H5
			// 			let getSignature = (callback) => {
			// 				return this.$C.post('/vod/sign',{},{
			// 					token:true
			// 				}).then(res=>{
			// 					return res
			// 				})
			// 			}
			// 			// #endif
						
			// 			// #ifndef H5
			// 			let getSignature = (callback) => {
			// 				this.$C.post('/vod/sign',{},{
			// 					token:true
			// 				}).then(res=>{
			// 					callback(res);
			// 				})
			// 			}
			// 			// #endif
						
			// 			// 生成唯一名称
			// 			let mediaName = this.genID(12)
			// 			uni.showLoading({
			// 				title: '上传中...',
			// 				mask: false
			// 			});
						
			// 			// #ifdef H5
			// 			const tcVod = new TcVod.default({
			// 			  getSignature: getSignature
			// 			})
			// 			const uploader = tcVod.upload({
			// 			  mediaFile: res.tempFile,
			// 			})
			// 			uploader.on('media_progress',(info)=> {
			// 			  console.log(info.percent) // 进度
			// 			})
			// 			uploader.done().then((doneResult)=>{
			// 				// 上传后的视频链接
			// 				item.video = doneResult.video.url
			// 				uni.hideLoading()
			// 			}).catch((err)=>{
			// 				uni.hideLoading()
			// 				uni.showToast({
			// 					title: '上传失败',
			// 					icon: 'none'
			// 				});
			// 			})
			// 			// #endif
						
			// 			// #ifndef H5
			// 			VodUploader.start({
			// 				mediaFile: res, 
			// 				getSignature: getSignature,
			// 				mediaName: mediaName,
			// 				success: (result)=>{
			// 					console.log('success');
			// 					console.log(result);
			// 				},
			// 				error:(result)=> {
			// 					uni.hideLoading()
			// 					console.log('错误信息：' + result.data.message);
			// 					let msg = result.data.code === 10002 ? '腾讯云点播子应用ID配置不正确，请修改自己部署的后端配置。（注意：老师提供的线上测试接口上传视频功能已关闭，请自己下载群文件完整后端代码跟着课程部署）' : result.data.message
			// 					uni.showModal({
			// 						title: '上传失败',
			// 						content: msg,
			// 						showCancel: false
			// 					});
			// 				},
			// 				progress:(result)=> {
			// 					console.log('progress');
			// 					console.log(result);
			// 				},
			// 				finish: (result)=>{
			// 					// 上传后视频链接
			// 					item.video = result.videoUrl
			// 					uni.hideLoading()
			// 				}
			// 			});
			// 			// #endif
			// 		}
			// 	});
			// },
			// 开启编辑状态
			openEdit(item){
				item.isedit = true
			},
			// 生成唯一ID
			genID(length){
			    return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
			}
		}
	}
</script>

<style>

</style>
